<template>
	<view class="giftItem">
		<view class="head">
			<view class="orderNo">送礼编号：{{item.gift.sn}}</view>
			<view v-if="item.remain && item.gift.remain_num>0 && item.available" class="remainTime">领取剩余时间:<u-count-down
					:timestamp="item.remain" font-size="24" separator-size="24" bg-color="#f7f7f7" color="#d0160f"
					separator-color="#d0160f" separator="zh"></u-count-down>
			</view>
			<view class="finish" v-else>领取完成</view>
		</view>
		<view class="goodsCon">
			<view class="thumb">
				<image :src="item.goods.image[0].file_url" class="thumbPic">
			</view>
			<view class="goodsMain">
				<view class="goodsInfo">
					<view class="goodsTitleWrap">
						<view class="goodsTitle">{{item.goods.goods_name}}</view>
						<view class="goodsPrice">￥{{item.price}}</view>
					</view>
					<view class="specWrap">
						<view class="buyNum">x1</view>
					</view>
				</view>
				<view class="paramList">
					<view class="item">限领：{{item.gift.per_num}}份</view>
					<view class="item">已领取份数：1份</view>
					<view class="item" v-if="item.is_pay===1">已支付</view>
					<view class="item" v-else>未支付</view>
				</view>
			</view>
		</view>
		<view class="orderFooter" v-if="item.gift.remain_num>0 && item.available || item.orders && item.orders.expresses.length>0">
			<view class="shareBtn" @click="toGift(item.gift.gift_no)" v-if="item.gift.remain_num>0 && item.available">
				继续领取</view>
			<view class="shareBtn" @click="showExpress(item)" v-if="item.orders && item.orders.expresses.length>0">查看物流</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "myGiftItem",
		props: {
			item: Object
		},
		data() {
			return {}
		},
		methods: {
			showExpress(item){
				this.$emit("express", item)
			},
			toGift(gift_no) {
				uni.navigateTo({
					url: `/goods/gift?toBack=1&gift_no=${gift_no}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.head {
		background-color: #f7f7f7;
		display: flex;
		align-items: center;
		padding: 0 15rpx;
		height: 80rpx;
		border-top: 20rpx solid #efefef;

		.orderNo {
			flex: 1;
			font-size: 24rpx;
		}

		.time {
			color: red;
		}

		.remainTime {
			font-size: 24rpx;
		}

		.finish {
			color: #c1200c;
			font-weight: bold;
		}
	}

	.goodsCon {
		padding: 25rpx 25rpx 20rpx 25rpx;
		display: flex;
	}

	.goodsMain {
		flex: 1;
		margin-left: 25rpx;

		.goodsInfo {
			padding-bottom: 10rpx;
			border-bottom: 1px solid #f7f7f7;

			.goodsTitleWrap {
				color: #333;
				font-size: 28rpx;
				display: flex;
				height: 40rpx;
				line-height: 40rpx;

				.goodsTitle {
					flex: 1;
					height: 40rpx;
					line-height: 40rpx;
					overflow: hidden;
				}
			}

			.specWrap {
				display: flex;
				color: #999;
				font-size: 24rpx;
				margin-top: 20rpx;
				height: 40rpx;
				line-height: 40rpx;

				.buyNum {
					flex: 1;
					text-align: right;
				}
			}
		}

		.paramList {
			overflow: hidden;
			margin-top: 20rpx;

			.item {
				color: #6b6b6b;
				width: 50%;
				float: left;
				font-size: 24rpx;
				height: 60rpx;
				line-height: 60rpx;
			}
		}
	}

	.thumbPic {
		width: 120rpx;
		height: 120rpx;
	}

	.orderFooter {
		border-top: 1px solid #f7f7f7;
		overflow: hidden;
		padding: 25rpx;

		.detailBtn {
			float: right;
			border: 1rpx solid #999;
			color: #666;
			font-size: 24rpx;
			height: 60rpx;
			line-height: 60rpx;
			padding: 0 20rpx;
			border-radius: 8rpx;
		}

		.shareBtn {
			float: right;
			background-color: #20cbd4;
			color: #ffffff;
			font-size: 24rpx;
			height: 60rpx;
			line-height: 60rpx;
			padding: 0 20rpx;
			border-radius: 8rpx;
			margin-left: 30rpx;
		}
	}
</style>
